<template>
  <div ref="chartRef" class="barChart"></div>
</template>
<script lang="ts">
  import { basicProps } from './props';
</script>

<script lang="ts" setup>
  import { onMounted, reactive, ref, Ref, onBeforeUnmount } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import { gettenhoursData } from '/@/api/requestApi/boardApi';
  defineProps({
    ...basicProps,
  });

  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
  const chartsdata = reactive({
    chain_ratio: [],
    x_index: [],
    year_on_year: [],
    today: [],
  });
  const timer: Ref<any> = ref('');
  async function gettenhours() {
    await gettenhoursData().then((res) => {
      chartsdata.chain_ratio = res.chain_ratio;
      chartsdata.today = res.today;
      chartsdata.x_index = res.x_index.map((item) => {
        return item + '点';
      });

      chartsdata.year_on_year = res.year_on_year;
      setOptions({
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#11367a',
          textStyle: {
            color: '#6dd0e3',
            fontSize: 10,
          },
        },
        legend: {
          top: '0',
          data: ['同比', '环比', '今日数据量'],
          textStyle: {
            color: '#fff',
          },
        },

        grid: {
          left: '3%',
          right: '5%',
          top: '16%',
          bottom: '7%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: chartsdata.x_index,
            axisTick: { show: false },
            axisLine: {
              lineStyle: {
                color: '#1dc1fd',
                width: 0.5,
              },
            },
            axisLabel: {
              color: '#fff',
              fontSize: 10,
              interval: 0,
            },
          },
        ],
        yAxis: [
          {
            name: '(数量)',
            nameGap: -5,
            nameTextStyle: {
              color: '#fff',
              fontSize: 9,
              align: 'right',
              padding: [0, 4, 0, 0],
            },
            type: 'value',
            axisLabel: {
              color: '#fff',
              showMaxLabel: false,
              fontSize: 10,
            },
            splitLine: {
              show: true,
              interval: 20,
              lineStyle: {
                type: 'dashed',
                color: '#25c6fe',
                width: 0.5,
                opacity: 0.4,
              },
            },
          },
        ],
        series: [
          {
            name: '同比',
            type: 'line',
            smooth: true,
            symbolSize: 10,
            showSymbol: false,
            data: chartsdata.year_on_year,
          },
          {
            name: '环比',
            type: 'line',
            symbolSize: 10,
            smooth: true,
            showSymbol: false,
            data: chartsdata.chain_ratio,
          },
          {
            name: '今日数据量',
            type: 'line',
            smooth: true,
            symbolSize: 10,
            showSymbol: false,
            data: chartsdata.today,
          },
        ],
      });
    });
  }
  onMounted(() => {
    gettenhours();
    timer.value = setInterval(() => {
      gettenhours();
    }, 60000);
  });
  onBeforeUnmount(() => {
    clearInterval(timer.value);
  });
</script>

<style lang="less" scoped>
  .barChart {
    width: 100%;
    height: 100%;
  }
</style>
